<template>
  <div>
    子组件
    <input ref="iptRef" class="box" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }, 
  // beforeDestroy  destroyed的区别
  // 在beforeDestroy 可以通过ref获取到dom元素，这个是dom还没有被从dom里面删除。
  // destroyed这个钩子函数，调用的时候 dom元素已经被删除了
  // 获取dom元素都要使用$refs的形式，不能使用原生的写法
  beforeDestroy() {
    console.log(1, document.querySelector('.box'), this.$refs.iptRef);
  },
  destroyed(){
    console.log(2, document.querySelector('.box'), this.$refs.iptRef);
  },
  // 在项目里登录权限 如何实现
  // 通过路由守卫，再用户登录成功以后，将token 保存到vuex和本地储存。在路由守卫beforeEach里面
  // 有token就放心next(), 
  // 没有token，如果访问的是白名单，例如login页面，直接放行 next()
  //           如果访问的是其他页面，直接跳转到登录页面 next('/login')

  // 401处理
  // 响应拦截器，2
  // if(err.response.data.code === 401) {}  2
}
</script>